<template>
  <div id="orgsave">
    <GoBack content="组织机构信息" backUrl="/orglist" />
    <div class="content" v-loading="loading">
      <el-form ref="orgFormRef" label-width="140px" :model="orgForm" :rules="formRule" :inline-message="true" class="form-input-l">
        <el-form-item prop="name" label="机构名称">
          <el-input type="text" v-model="orgForm.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item prop="code" label="机构编码">
          <el-input type="text" v-model="orgForm.code" placeholder="请输入编码"></el-input>
        </el-form-item>
        <el-form-item prop="status" label="机构状态">
          <el-radio-group v-model="orgForm.status">
            <el-radio :label="0">启用</el-radio>
            <el-radio :label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="type" label="机构类型">
          <el-radio-group v-model="orgForm.type" @change="handleChangeType">
            <el-radio :label="0">普通机构</el-radio>
            <el-radio :label="1">管理机构</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="contactName" label="联系人">
          <el-input type="text" v-model="orgForm.contactName" placeholder="请输入联系人"></el-input>
        </el-form-item>
        <el-form-item prop="contactTel" label="联系电话">
          <el-input type="text" v-model="orgForm.contactTel" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item prop="area" label="所属省市区">
          <el-cascader ref="areaCasRef" v-model="orgForm.area" filterable placeholder="请选择省-市-区" :clearable="true" :show-all-levels="true"
            :props="{ expandTrigger: 'click' ,value:'code',label:'name',lazy:true,lazyLoad:lazyLoadAreaList,leaf:'leaf'}"></el-cascader>
        </el-form-item>
        <el-form-item prop="address" label="详细地址">
          <el-input type="text" v-model="orgForm.address" placeholder="请输入地址"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="saving" @click="confirmForm(orgFormRef)">保存</el-button>
        </el-form-item>
      </el-form>
      <el-divider content-position="left" class="w300">部门管理</el-divider>
      <splitpanes class="default-theme">
        <pane size="30">
          <el-button class="mb10" size="small" type="success" @click="addDept">新建部门</el-button>
          <el-dialog title="部门信息" :show-close="false" v-model="showDeptDialog" :close-on-click-modal="false" width="600px">
            <el-form ref="deptFormRef" :model="deptForm" :rules="deptFormRule" label-width="110px" class="form-input-m" :inline-message="true">
              <el-form-item prop="name" label="部门名称">
                <el-input type="text" v-model="deptForm.name" placeholder="请输入名称"></el-input>
              </el-form-item>
              <el-form-item prop="code" label="部门编号">
                <el-input type="text" v-model="deptForm.code" placeholder="请输入编号"></el-input>
              </el-form-item>
              <el-form-item prop="code" label="部门负责人">
                <el-select v-model="deptForm.managerId" placeholder="请选择用户" filterable>
                  <el-option v-for="user in userList" :key="user.id" :label="user.realname" :value="user.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="address" class="input-l" label="位置">
                <el-input type="text" v-model="deptForm.address" placeholder="请输入位置"></el-input>
              </el-form-item>
            </el-form>
            <template #footer>
              <el-button type="primary" @click="confirmDept(deptFormRef)">保 存</el-button>
              <el-button @click="closeDeptDialog(deptFormRef)">取 消</el-button>
            </template>
          </el-dialog>
          <el-table ref="deptListRef" highlight-current-row @current-change="changeDeptRow" v-loading="tloading" row-key="id" :data="deptList" max-height="500px">
            <el-table-column label="序号" width="60" align="center">
              <template #default="scope">
                <span>{{scope.$index+1}}</span>
              </template>
            </el-table-column>
            <el-table-column label="部门名称" width="100" align="center">
              <template #default="scope">
                <el-link type="primary" :underline="false" @click="editDept(scope.row,scope.$index)">{{scope.row.name}}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="code" label="部门编号" width="100" align="center"></el-table-column>
            <el-table-column prop="User.realname" label="部门负责人" align="center"></el-table-column>
            <el-table-column fixed="right" label="操作" width="100" align="center">
              <template #default="scope">
                <el-button size="small" icon="EditPen" type="primary" plain circle @click="editDept(scope.row,scope.$index)"></el-button>
                <el-button size="small" type="danger" icon="Delete" plain circle @click="deleteDept(scope.row.id,scope.$index)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </pane>
        <pane>
          <el-button class="mb10" size="small" type="success" @click="addGroup">新建小组</el-button>
          <el-dialog title="小组信息" :show-close="false" v-model="showGroupDialog" :close-on-click-modal="false" width="600px">
            <el-form ref="groupFormRef" :model="groupForm" :rules="groupFormRule" label-width="110px" class="form-input-m" :inline-message="true">
              <el-form-item prop="name" label="小组名称">
                <el-input type="text" v-model="groupForm.name" placeholder="请输入名称"></el-input>
              </el-form-item>
              <el-form-item prop="code" label="小组编号">
                <el-input type="text" v-model="groupForm.code" placeholder="请输入编号"></el-input>
              </el-form-item>
              <el-form-item prop="leader" label="组长">
                <el-select v-model="groupForm.leader" placeholder="请选择组长" filterable>
                  <el-option v-for="user in userList" :key="user.id" :label="user.realname" :value="user.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="address" class="input-l" label="位置">
                <el-input type="text" v-model="groupForm.address" placeholder="请输入位置"></el-input>
              </el-form-item>
            </el-form>
            <template #footer>
              <el-button type="primary" @click="confirmGroup(groupFormRef)">保 存</el-button>
              <el-button @click="closeGroupDialog(groupFormRef)">取 消</el-button>
            </template>
          </el-dialog>
          <el-table v-loading="gloading" row-key="id" :data="groupList" max-height="500px">
            <el-table-column label="序号" width="60" align="center">
              <template #default="scope">
                <span>{{scope.$index+1}}</span>
              </template>
            </el-table-column>
            <el-table-column label="小组名称" width="100" align="center">
              <template #default="scope">
                <el-link type="primary" :underline="false" @click="editGroup(scope.row,scope.$index)">{{scope.row.name}}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="code" label="小组编号" width="100" align="center"></el-table-column>
            <el-table-column prop="User.realname" label="组长" width="100" align="center"></el-table-column>
            <el-table-column prop="address" label="位置" align="center"></el-table-column>
            <el-table-column fixed="right" label="操作" width="100" align="center">
              <template #default="scope">
                <el-button size="small" icon="EditPen" type="primary" plain circle @click="editGroup(scope.row,scope.$index)"></el-button>
                <el-button size="small" type="danger" icon="Delete" plain circle @click="deleteGroup(scope.row.id,scope.$index)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </pane>
      </splitpanes>
      <el-divider v-if="orgForm.type===1" content-position="left" class="w300">管辖机构</el-divider>
      <el-button v-if="orgForm.type===1" class="mb10" size="small" type="success" @click="addOrgChild">添加机构</el-button>
      <el-dialog title="选定管辖机构" :show-close="false" v-model="showOrgChildDialog" :close-on-click-modal="false" width="900px">
        <el-table v-loading="oloading" row-key="id" :data="orgList" @selection-change="handleSelectionChange" style="width: 100%">
          <el-table-column type="selection" width="60" align="center"></el-table-column>
          <el-table-column label="序号" width="60" align="center">
            <template #default="scope">
              <span>{{scope.$index+1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="机构名称" prop="name" width="200" align="center"></el-table-column>
          <el-table-column prop="code" label="机构编号" width="100" align="center"></el-table-column>
          <el-table-column prop="address" label="所在地市" align="center">
            <template #default="scope">{{scope.row.province+scope.row.city+scope.row.area}}</template>
          </el-table-column>
          <el-table-column prop="address" label="详细地址" align="center"></el-table-column>
        </el-table>
        <template #footer>
          <el-button type="primary" @click="confirmOrg()">保 存</el-button>
          <el-button @click="closeOrgDialog()">取 消</el-button>
        </template>
      </el-dialog>
      <el-table v-if="orgForm.type===1" v-loading="cloading" row-key="id" :data="orgChildList" style="width: 1000px">
        <el-table-column label="序号" width="60" align="center">
          <template #default="scope">
            <span>{{scope.$index+1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="机构名称" width="200" align="center"></el-table-column>
        <el-table-column prop="code" label="机构编号" width="100" align="center"></el-table-column>
        <el-table-column prop="address" label="所在地市" align="center">
          <template #default="scope">{{scope.row.province+scope.row.city+scope.row.area}}</template>
        </el-table-column>
        <el-table-column prop="address" label="详细地址" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" width="110" align="center">
          <template #default="scope">
            <el-button size="small" type="danger" icon="Delete" plain circle @click="deleteOrgChild(scope.row.id,scope.$index)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup lang="ts">
import GoBack from '../../components/GoBack.vue';
import { ref, reactive, getCurrentInstance } from 'vue';
import type { TableInstance, ElCascader, FormInstance } from 'element-plus';
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';
import { notifyType, notifyMessage } from '../../utils/common';
import qs from 'qs';
let { proxy }: any = getCurrentInstance();
let orgFormRef = ref<FormInstance>();
let deptFormRef = ref<FormInstance>();
let groupFormRef = ref<FormInstance>();
let deptListRef = ref<TableInstance>();
let areaCasRef = ref<InstanceType<typeof ElCascader>>();
let loading = ref(false);
let saving = ref(false);
let orgForm: any = reactive({
  id: '',
  name: '',
  code: '',
  type: 0,
  status: 0, //0启用，1禁用
  orgIds: [],
  area: [],
  contactName: '',
  contactTel: '',
  address: ''
});
let formRule = {
  name: [
    {
      required: true,
      message: '请输入名称',
      trigger: 'blur'
    },
    {
      min: 2,
      max: 20,
      message: '长度为2到20个字符',
      trigger: 'blur'
    }
  ],
  contactName: [
    {
      min: 2,
      max: 20,
      message: '长度为2到20个字符',
      trigger: 'blur'
    }
  ],
  contactTel: [
    {
      min: 2,
      max: 20,
      message: '长度为2到20个字符',
      trigger: 'blur'
    }
  ],
  address: [
    {
      min: 2,
      max: 200,
      message: '长度为2到200个字符',
      trigger: 'blur'
    }
  ]
};
let tloading = ref(false);
let deptList: any = reactive([]);
let showDeptDialog = ref(false);
let deptForm = reactive({
  idx: 0,
  id: '',
  orgId: '',
  name: '',
  code: '',
  managerId: '',
  address: ''
});
let deptFormRule = {
  name: [
    {
      required: true,
      message: '请输入名称',
      trigger: 'blur'
    },
    {
      min: 2,
      max: 20,
      message: '长度为2到20个字符',
      trigger: 'blur'
    }
  ]
};

let gloading = ref(false);
let groupList: any = reactive([]);
let showGroupDialog = ref(false);
let groupForm = reactive({
  idx: 1,
  id: '',
  orgId: '',
  deptId: '',
  name: '',
  code: '',
  address: '',
  leader: ''
});
let groupFormRule = {
  name: [
    {
      required: true,
      message: '请输入名称',
      trigger: 'blur'
    },
    {
      min: 2,
      max: 20,
      message: '长度为2到20个字符',
      trigger: 'blur'
    }
  ]
};

let showOrgChildDialog = ref(false);
let oloading = ref(false);
let cloading = ref(false);
let orgList: any = reactive([]); //没有父级的普通机构列表
let multSelected: any = reactive([]); //批量选择普通机构列表
let orgChildList: any = reactive([]); //管辖机构列表
let userList: any = reactive([]);

init();
function init() {
  if (proxy.$router.currentRoute.value.query.id) {
    orgForm.id = proxy.$router.currentRoute.value.query.id;
    findOrgById();
    findDepartmentListByOrgId();
    findOrgChildList();
    findUsersByOrgId();
  }
}
//懒加载省市区
function lazyLoadAreaList(node: any, resolve: any) {
  if (node.isLeaf) {
    resolve();
    return;
  }
  let url = '';
  const param: any = {};
  switch (node.level) {
    case 0:
      url = '/api/common/findDictProvinceList';
      break;
    case 1:
      url = '/api/common/findDictCityList';
      param.provCode = node.value;
      break;
    case 2:
      url = '/api/common/findDictAreaList';
      param.cityCode = node.value;
      break;
  }
  proxy.$http
    .get(url, { params: param })
    .then((res: any) => {
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      } else {
        const nodes = res.data.dataList.map((ele: any) => {
          return {
            code: ele.code,
            name: ele.name,
            children: [],
            leaf: node.level === 2
          };
        });
        resolve(nodes);
      }
    })
    .catch((err: string) => {
      notifyMessage(err, notifyType.warning, proxy);
    });
}

function findOrgById() {
  loading.value = true;
  const url = '/api/sys/findOrgById';
  proxy.$http
    .get(url, { params: { id: orgForm.id } })
    .then((res: any) => {
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      } else {
        orgForm.name = res.data.org.name;
        orgForm.code = res.data.org.code;
        orgForm.type = res.data.org.type;
        orgForm.status = res.data.org.status;
        orgForm.area = [res.data.org.provinceCode, res.data.org.cityCode, res.data.org.areaCode];
        orgForm.contactName = res.data.org.contactName;
        orgForm.contactTel = res.data.org.contactTel;
        orgForm.address = res.data.org.address;
      }
      loading.value = false;
    })
    .catch((err: string) => {
      loading.value = false;
      notifyMessage(err, notifyType.warning, proxy);
    });
}
function findDepartmentListByOrgId() {
  tloading.value = true;
  const url = '/api/sys/findDepartmentListByOrgId';
  proxy.$http
    .get(url, { params: { orgId: orgForm.id } })
    .then((res: any) => {
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      } else {
        deptList.push(...res.data.deptList);
        if (deptList.length > 0) {
          deptListRef.value!.setCurrentRow(deptList[0]);
          groupForm.deptId = deptList[0].id;
        }
      }
      tloading.value = false;
    })
    .catch((err: string) => {
      tloading.value = false;
      notifyMessage(err, notifyType.warning, proxy);
    });
}
function findGroupListByDeptId() {
  gloading.value = true;
  const url = '/api/sys/findGroupListByDeptId';
  groupList.length = 0;
  proxy.$http
    .get(url, { params: { deptId: groupForm.deptId } })
    .then((res: any) => {
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      } else {
        groupList.push(...res.data.groupList);
      }
      gloading.value = false;
    })
    .catch((err: string) => {
      gloading.value = false;
      notifyMessage(err, notifyType.warning, proxy);
    });
}
function findOrgChildList() {
  cloading.value = true;
  orgChildList.length = 0;
  const url = '/api/sys/findOrgChildList';
  proxy.$http
    .get(url, { params: { orgId: orgForm.id } })
    .then((res: any) => {
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      } else {
        orgChildList.push(...res.data.orgList);
      }
      cloading.value = false;
    })
    .catch((err: string) => {
      cloading.value = false;
      notifyMessage(err, notifyType.warning, proxy);
    });
}
function findUsersByOrgId() {
  const url = '/api/user/findUsersByOrgId';
  proxy.$http
    .get(url, { params: { orgId: orgForm.id } })
    .then((res: any) => {
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      } else {
        userList.push(...res.data.userList);
      }
    })
    .catch((err: string) => {
      notifyMessage(err, notifyType.warning, proxy);
    });
}
function handleChangeType(value: any) {
  if (value === 0 && orgChildList.length > 0) {
    notifyMessage(
      '此机构有管辖的子级机构，无法置为【普通机构】，请删除管辖机构后再试！',
      notifyType.warning,
      proxy
    );
    orgForm.type = 1;
  }
}

function confirmForm(orgFormRef: any) {
  if (!orgFormRef) return;
  orgFormRef.validate((valid: any) => {
    if (!valid) {
      return false;
    }
    saving.value = true;

    let url = '';
    let obj: any = new Object();
    obj = {
      id: orgForm.id,
      name: orgForm.name,
      code: orgForm.code,
      type: orgForm.type,
      status: orgForm.status,
      contactName: orgForm.contactName,
      contactTel: orgForm.contactTel,
      address: orgForm.address,
      province: '',
      provinceCode: '',
      city: '',
      cityCode: '',
      area: '',
      areaCode: ''
    };

    //省市区
    if (orgForm.area.length === 3) {
      const areaNode: any = areaCasRef.value!.getCheckedNodes(false);
      if (areaNode.length === 1) {
        const nodes = areaNode[0].pathNodes;
        obj.provinceCode = nodes[0].value;
        obj.province = nodes[0].label;
        obj.cityCode = nodes[1].value;
        obj.city = nodes[1].label;
        obj.areaCode = nodes[2].value;
        obj.area = nodes[2].label;
      }
    }

    if (orgForm.id) {
      url = '/api/sys/editOrg';
    } else {
      url = '/api/sys/addOrg';
    }

    proxy.$http
      .post(url, obj)
      .then((res: any) => {
        if (res.status.code === 1) {
          notifyMessage('保存成功', notifyType.success, proxy);
          orgForm.id = res.data.orgId;
          saving.value = false;
        } else {
          notifyMessage(res.status.msg, notifyType.warning, proxy);
        }
      })
      .catch((err: string) => {
        notifyMessage(err, notifyType.warning, proxy);
        saving.value = false;
      });
    return true;
  });
}

function changeDeptRow(row: any) {
  if (row) {
    groupForm.deptId = row.id;
    findGroupListByDeptId();
  }
}

function addDept() {
  if (!orgForm.id) {
    notifyMessage('请先保存组织机构信息，再添加部门', notifyType.warning, proxy);
    return;
  }
  showDeptDialog.value = true;
  deptForm.orgId = orgForm.id;
}
function editDept(item: any, idx: any) {
  deptForm.idx = idx;
  deptForm.id = item.id;
  deptForm.orgId = item.orgId;
  deptForm.name = item.name;
  deptForm.code = item.code;
  deptForm.managerId = item.managerId;
  deptForm.address = item.address;
  showDeptDialog.value = true;
}
function confirmDept(deptFormRef: any) {
  if (!deptFormRef) return;
  deptFormRef.validate((valid: any) => {
    if (!valid) {
      return false;
    }
    let url = '';
    let obj: any = new Object();
    obj = {
      id: deptForm.id,
      orgId: deptForm.orgId,
      name: deptForm.name,
      code: deptForm.code,
      managerId: deptForm.managerId,
      address: deptForm.address
    };
    if (deptForm.id) {
      url = '/api/sys/editDepartment';
    } else {
      url = '/api/sys/addDepartment';
    }

    proxy.$http
      .post(url, obj)
      .then((res: any) => {
        if (res.status.code !== 1) {
          notifyMessage(res.status.msg, notifyType.warning, proxy);
        } else {
          notifyMessage('保存成功', notifyType.success, proxy);
          let deptManager = null;
          if (deptForm.managerId) {
            const temp = userList.filter((p: any) => p.id === deptForm.managerId);
            if (temp && temp.length === 1) {
              deptManager = temp[0];
            }
          }
          if (deptForm.id) {
            deptList[deptForm.idx].name = deptForm.name;
            deptList[deptForm.idx].code = deptForm.code;
            deptList[deptForm.idx].address = deptForm.address;
            deptList[deptForm.idx].managerId = deptForm.managerId;
            deptList[deptForm.idx].User = deptManager;
          } else {
            // 新增一级项
            const temp = {
              id: res.data.deptId,
              orgId: deptForm.orgId,
              name: deptForm.name,
              code: deptForm.code,
              managerId: deptForm.managerId,
              User: deptManager,
              address: deptForm.address
            };
            deptList.push(temp);
            deptListRef.value!.setCurrentRow(temp);
          }
          clearDeptForm();
        }
        showDeptDialog.value = false;
      })
      .catch((err: string) => {
        notifyMessage(err, notifyType.warning, proxy);
      });
    return true;
  });
}

function closeDeptDialog(deptFormRef: any) {
  deptFormRef.resetFields();
  clearDeptForm();
  showDeptDialog.value = false;
}
function clearDeptForm() {
  deptForm.idx = 0;
  deptForm.id = '';
  deptForm.name = '';
  deptForm.code = '';
  deptForm.managerId = '';
  deptForm.address = '';
}
function deleteDept(id: any, idx: any) {
  proxy
    .$confirm('确定删除此部门?', '提示', {
      cancelButtonClass: 'cancel-button',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(() => {
      const url = '/api/sys/deleteDepartment';
      proxy.$http
        .post(url, { id })
        .then((res: any) => {
          if (res.status.code === 1) {
            notifyMessage('删除成功', notifyType.success, proxy);
            deptList.splice(idx, 1);
          } else {
            notifyMessage(res.status.msg, notifyType.warning, proxy);
          }
        })
        .catch((err: string) => {
          notifyMessage(err, notifyType.warning, proxy);
        });
    })
    .catch((err: string) => {
      console.log(err);
    });
}
function addGroup() {
  if (!groupForm.deptId) {
    notifyMessage('未找到部门id', notifyType.warning, proxy);
    return;
  }
  showGroupDialog.value = true;
  groupForm.orgId = orgForm.id;
}
function editGroup(item: any, idx: any) {
  groupForm.idx = idx;
  groupForm.id = item.id;
  groupForm.orgId = item.orgId;
  groupForm.deptId = item.deptId;
  groupForm.name = item.name;
  groupForm.code = item.code;
  groupForm.address = item.address;
  groupForm.leader = item.leader;
  showGroupDialog.value = true;
}
function confirmGroup(groupFormRef: any) {
  if (!groupFormRef) return;
  groupFormRef.validate((valid: any) => {
    if (!valid) {
      return false;
    }
    let url = '';
    let obj: any = new Object();
    obj = {
      id: groupForm.id,
      orgId: groupForm.orgId,
      deptId: groupForm.deptId,
      name: groupForm.name,
      code: groupForm.code,
      address: groupForm.address,
      leader: groupForm.leader
    };
    if (groupForm.id) {
      url = '/api/sys/editGroup';
    } else {
      url = '/api/sys/addGroup';
    }

    proxy.$http
      .post(url, obj)
      .then((res: any) => {
        if (res.status.code !== 1) {
          notifyMessage(res.status.msg, notifyType.warning, proxy);
        } else {
          notifyMessage('保存成功', notifyType.success, proxy);
          if (groupForm.id) {
            groupList[groupForm.idx].deptId = groupForm.deptId;
            groupList[groupForm.idx].name = groupForm.name;
            groupList[groupForm.idx].code = groupForm.code;
            groupList[groupForm.idx].address = groupForm.address;
            groupList[groupForm.idx].leader = groupForm.leader;
          } else {
            // 新增一级项
            const temp = {
              id: res.data.groupId,
              orgId: groupForm.orgId,
              deptId: groupForm.deptId,
              name: groupForm.name,
              code: groupForm.code,
              address: groupForm.address,
              leader: groupForm.leader
            };
            groupList.push(temp);
          }
          findGroupListByDeptId();
          clearGroupForm();
        }
        showGroupDialog.value = false;
      })
      .catch((err: string) => {
        notifyMessage(err, notifyType.warning, proxy);
      });
    return true;
  });
}

function closeGroupDialog(groupFormRef: any) {
  groupFormRef.resetFields();
  clearGroupForm();
  showGroupDialog.value = false;
}
function clearGroupForm() {
  groupForm.idx = 0;
  groupForm.id = '';
  groupForm.orgId = '';
  groupForm.name = '';
  groupForm.code = '';
  groupForm.address = '';
  groupForm.leader = '';
}
function deleteGroup(id: any, idx: any) {
  proxy
    .$confirm('确定删除此部门?', '提示', {
      cancelButtonClass: 'cancel-button',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(() => {
      const url = '/api/sys/deleteGroup';
      proxy.$http
        .post(url, { id })
        .then((res: any) => {
          if (res.status.code === 1) {
            notifyMessage('删除成功', notifyType.success, proxy);
            groupList.splice(idx, 1);
          } else {
            notifyMessage(res.status.msg, notifyType.warning, proxy);
          }
        })
        .catch((err: string) => {
          notifyMessage(err, notifyType.warning, proxy);
        });
    })
    .catch((err: string) => {
      console.log(err);
    });
}
//添加管辖机构
function addOrgChild() {
  if (!orgForm.id) {
    notifyMessage('请先保存组织机构信息，再添加管辖机构', notifyType.warning, proxy);
    return;
  }
  showOrgChildDialog.value = true;

  //获取除自身机构外的所有普通机构
  oloading.value = true;
  orgList.length = 0;
  const url = '/api/sys/findOrgNoParentList';
  proxy.$http
    .get(url, { params: { orgId: orgForm.id } })
    .then((res: any) => {
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      } else {
        orgList.push(...res.data.orgList);
      }
      oloading.value = false;
    })
    .catch((err: string) => {
      oloading.value = false;
      notifyMessage(err, notifyType.warning, proxy);
    });
}
function handleSelectionChange(val: any) {
  multSelected = val;
}
function confirmOrg() {
  const temp: any = [];
  multSelected.forEach((item: any) => {
    temp.push({
      id: item.id,
      parentId: orgForm.id
    });
  });
  proxy.$http
    .post(
      '/api/sys/setOrgParentIdList',
      qs.stringify({ orgList: temp }, { arrayFormat: 'indices' })
    )
    .then((res: any) => {
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      } else {
        notifyMessage('设置成功', notifyType.success, proxy);
      }
      showOrgChildDialog.value = false;
      findOrgChildList();
    })
    .catch((err: string) => {
      notifyMessage(err, notifyType.warning, proxy);
    });
}
function closeOrgDialog() {
  showOrgChildDialog.value = false;
}
function deleteOrgChild(id: any, idx: any) {
  proxy
    .$confirm('确定删除此机构？?', '提示', {
      cancelButtonClass: 'cancel-button',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(() => {
      const temp = [{ id, parentId: null }];
      proxy.$http
        .post(
          '/api/sys/setOrgParentIdList',
          qs.stringify({ orgList: temp }, { arrayFormat: 'indices' })
        )
        .then((res: any) => {
          if (res.status.code === 1) {
            notifyMessage('删除成功', notifyType.success, proxy);
            orgChildList.splice(idx, 1);
          } else {
            notifyMessage(res.status.msg, notifyType.warning, proxy);
          }
        })
        .catch((err: string) => {
          notifyMessage(err, notifyType.warning, proxy);
        });
    })
    .catch((err: string) => {
      console.log(err);
    });
}
</script>
<style lang="scss">
#orgsave {
  .w300 {
    margin-top: 40px;
  }
  .mb10 {
    margin-bottom: 10px;
    display: block;
  }
  .clsItems {
    .el-tag {
      margin: 5px 5px 0 0;
      height: 25px;
      line-height: 25px;
      cursor: pointer;

      i {
        margin-left: 5px;
      }
    }
  }
  .item-map {
    display: inline-block;
    margin-bottom: 40px;
  }
  .splitpanes__pane {
    padding-right: 10px;
  }
  .default-theme.splitpanes--vertical > .splitpanes__splitter,
  .default-theme .splitpanes--vertical > .splitpanes__splitter {
    width: 10px;
  }
}
</style>